<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
			border: 0px;
			background-color: #33CCCC;
			text-align: center;
		}
		.input-group input{
			height: 30px;
		}
		.head_img{
			width: 40px;
			height: 40px;
			border-radius: 20px;
		}
		.photo{
			margin-left: 60%;
			margin-top: -30px;
			position: absolute;
			width: 75px;

		}

		.input-group{
			margin-right: 15px;
				 }
	</style>
</head>
<body>
<a class="list-group-item active my-center" >
	<span class="glyphicon glyphicon-chevron-left" style="float: left;" onclick="javascript:history.back(-1);">
	</span>完善个人资料</a>

   <div style="padding-left: 10px;padding-right: 5px">
	   <form class="bs-example bs-example-form" role="form">
		   <ul class="list-group">
			   <li class="list-group-item">
				   上传头像：&nbsp;&nbsp;
				   <img src="images/6.jpg" class="head_img" id="img">
				   <input type="file" id="file" class="photo" name="photo"/>
			   </li>
		   </ul>
		   <div class="input-group" style="margin-top: 5px;border-bottom: 1px solid gainsboro;height: 40px">
			   <span class="input-group-addon" style="background-color: white;border: 0px" name="name">账号:</span>
			   <input type="text" id="name" class="form-control" name="name" readonly />
		   </div>
		   <div class="input-group" style="margin-top: 10px;border-bottom: 1px solid gainsboro;height: 40px">
			   <span class="input-group-addon" style="background-color: white;border: 0px">姓名:</span>
			   <input type="text" id="realName" class="form-control" name="realName">
		   </div>
		   <div class="input-group" style="margin-top: 10px;border-bottom: 1px solid gainsboro;height: 40px">
			   <span class="input-group-addon" style="background-color: white;border: 0px">手机:</span>
			   <input type="text" id="phone" class="form-control" name="phone">
		   </div>
		   <div class="input-group" style="margin-top: 10px;border-bottom: 1px solid gainsboro;height: 40px">
			   <span class="input-group-addon" style="background-color: white;border: 0px">地址:</span>
			   <input type="text" id="address" class="form-control" name="address" >
		   </div><br><br>
		   <button type="button" class="btn btn-primary" onclick="update()" style="width: 100%;background-color: #33CCCC;border: 0px">确认保存</button>
	   </form>
   </div>

<script src="js/ajaxfileupload.js"></script>
	<script type="text/javascript">
	$(function () {
		var user = JSON.parse(localStorage.user);
		$("#img").attr({src:"http://localhost:8080"+user.photo});
		$("#name").val(user.name);
		$("#realName").val(user.realName);
		$("#address").val(user.address);
		$("#phone").val(user.phone);
	});
	function update() {
		var user = JSON.parse(localStorage.user);
		if(user == null){
			location.href = "login.html";
		}
		uid = user.id;
		var data = $("form").serialize();
		$.ajaxFileUpload({
			url:"http://localhost:8080/updateUser?id="+uid+"&"+data,
			secureuri:false,
			fileElementId:"file",
			data:data,
			datatype:"json",
			type:"post",
			success:function (data,status) {
				alert("修改成功");
				location.href = "login.html";
			},
			error:function(data,status,e){
			}
		})
	}
</script>

</body>
</html>